<template>
	<view class="zai-box">
		<image src="../../static/login.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">LOGO区域</view>
		<view class="zai-form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="姓名" name="name" class="zai-input">
					<uni-easyinput :inputBorder="false" disableColor type="text" v-model="formData.name"
						placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password" class="zai-input">
					<uni-easyinput :inputBorder="false" disableColor type="password" v-model="formData.password"
						placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button @click="submit" class="zai-btn">Submit</button>
			<view class="zai-label">忘记密码？</view>
			<navigator url="../register/register" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
		</view>
	</view>
</template>
<script>
	import {
		userLogin
	} from "../../api/user"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					password: ''
				},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 8,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: "密码不能为空"
							},
							{
								pattern: /^[0-9a-z]{4,10}$/i,
								errorMessage: "密码只能以数字字母组成长度4到10位"
							}
						]
					}
				}
			}
		},
		methods: {
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(async (info) => {
					//页面验证通过了
					// let  res2
					//console.log(info);
					let res = await userLogin({
						"username": info.name,
						"password": info.password
					})
					console.log(res);
					let code = res.data.code;

					if (code == 200) {
						console.log("登录成功");
						let token = res.data.token;
						uni.setStorageSync("token", token);
						uni.switchTab({
							url: "/pages/user/user"
						})

					} else {
						uni.showModal({
							title: '登录失败',
							content: res.data.msg
						});
					}

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		width: 100%;
		width: 100%;
		height: 310upx;
	}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.zai-form {
		margin-top: 300upx;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

</style>